<template>
    <view class="container">
      <view class="detail">{{ tableData[0].courseName }}</view>
      <view class="table-container">
        <table style="width: 100%;">
          <thead>
          <tr style="background-color: #ccc">
            <th>序号</th>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>考试成绩</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item, index) in tableData" :key="index">
            <td>{{ item.id }}</td>
            <td>{{ item.studentId }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.sex }}</td>
            <td>{{ item.examScore }}</td>
          </tr>
          </tbody>
        </table>
      </view>

      <view style="display: flex; margin-top: 40rpx;">
        <button class="button" @click="input">录入平时成绩</button>
      </view>
    </view>

</template>
<script>
import teacher from "../../api/teacher";

export default {
  data() {
    return {
      tableData: [{
          id: 0,
          courseId: 0,
          courseName: '',
          studentId: 0,
          name: '',
          sex: '',
          examScore: 0
        },
      ],
      courseId: 0,
    }
  },
  methods: {
    //查看某门考试的学生成绩
    async view(id) {
      try {
        const res = await teacher.getGrade(id)
        this.tableData = res.data
        console.log('-----',this.tableData)
      } catch (e) {
        return Promise.reject(e)
      }
    },

    //跳转录入成绩
    async input() {
      let id = this.courseId
      uni.navigateTo({
        url: `/pages/scores/inputGrades?id=${id}`, // 跳转的目标页面路径
      });
    },
  },
  async onLoad(option) {
    console.log(Number(option.id))
    this.courseId = Number(option.id)
    await this.view(Number(option.id))
  }

}
</script>
<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中 */
}

.detail {
  width: 90%;
  height: 40px;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  text-align: center; /* 确保单行文本居中 */
  font-weight: bold;
  font-size: 22px;
  margin-top: 10px;
}

.table-container {
  width: 90%;
  height: 60vh; /* 设置表格容器的高度 */
  overflow: auto; /* 添加滚动条 */
  margin-top: 30rpx;
}

table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  font-size: 14px;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
  word-wrap: break-word;
  white-space: pre-line;
}

.button {
  border: 0;
  background-color: #409EFF;
  color: white;
  width: 210rpx;
  font-size: 14px;
}
</style>